<template>
  <div class="pageStructureEditor">
    <div class="operationBar" @click="resetCurrent">
      <span>PageStructureEditor</span>
      <span>
        <i class="el-icon-document-add" @click.stop="handleAddFile" />
        <i class="el-icon-folder-add" @click.stop="handleAddFolder" />
      </span>
    </div>
    <el-tree
      ref="pageStructureTree"
      node-key="key"
      highlight-current
      :indent="8"
      :data="pageTree"
      @node-click="handleNodeClick"
    >
      <div class="nodeItem" slot-scope="{ data }">
        <div class="leftPart">
          <!-- <i v-if="data.type === 'file'" class="el-icon-document" /> -->
          <div v-if="data.editting" @click.stop>
            <el-input
              ref="input"
              v-model="currentEditting.label"
              size="mini"
              @blur="handleInputBlur(data)"
            />
          </div>
          <span v-else>
            <i
              v-if="data.type === 'folder' && !data.children.length"
              class="el-icon-caret-right"
            />
            <i v-if="data.type === 'file'" class="el-icon-document" />
            {{ data.label }}
          </span>
        </div>
        <div class="rightPart">
          <el-dropdown trigger="click">
            <i class="el-icon-setting" @click.stop="handleClickSetting(data)" />
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="data.type === 'file'">
                <span @click="handleEditting(data)">编辑页面</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <span @click="handleRename(data)">重命名</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <i class="el-icon-delete" @click.stop="handleDelete" />
        </div>
      </div>
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentEditting: null,
      pageTree: [
        {
          type: "file",
          label: "main",
          key: "/main",
          editting: false,
        },
        {
          type: "file",
          label: "home",
          key: "/home",
          editting: false,
        },
        {
          type: "folder",
          label: "pages",
          key: "/pages",
          editting: false,
          children: [
            {
              type: "file",
              label: "yyy",
              key: "/pages/yyy",
              editting: false,
            },
            {
              type: "file",
              label: "xxx",
              key: "/pages/xxx",
              editting: false,
            },
            {
              type: "folder",
              label: "nnn",
              key: "/pages/nnn",
              editting: false,
              children: [],
            },
            {
              type: "file",
              label: "aaa",
              key: "/pages/aaa",
              editting: false,
            },
            {
              type: "file",
              label: "ddd",
              key: "/pages/ddd",
              editting: false,
            },
            {
              type: "file",
              label: "ccc",
              key: "/pages/ccc",
              editting: false,
            },
            {
              type: "folder",
              label: "eee",
              key: "/pages/eee",
              editting: false,
              children: [],
            },
          ],
        },
        {
          type: "folder",
          label: "auth-aaa",
          key: "/auth-aaa",
          editting: false,
          children: []
        },
        {
          type: "folder",
          label: "auth-management",
          key: "/auth-management",
          editting: false,
          children: [
            {
              type: "folder",
              label: "auth",
              key: "/auth-management/auth",
              editting: false,
              children: [
                {
                  type: "file",
                  label: "add",
                  key: "/auth-management/auth/add",
                  editting: false,
                },
              ],
            },
          ],
        },
      ],
    };
  },
  created() {
    this.pageTree = this.sortFileAndFolder(this.pageTree);
  },
  methods: {
    sortFileAndFolder(files) {
      if (!files || !files.length) return [];
      const folders = [];
      for (let i = 0, len = files.length; i < len; i++) {
        if (files[i].type === "folder") {
          files[i].children = this.sortFileAndFolder(files[i].children);
          folders.push(...files.splice(i, 1));
          i--;
          len--;
        }
      }
      return [
        ...folders.sort(this.sortByLabel),
        ...files.sort(this.sortByLabel),
      ];
    },
    sortByLabel(pre, cur) {
      return pre.label.localeCompare(cur.label);
    },
    resetCurrent() {
      this.currentEditting = null;
      this.setCurrentKey();
    },
    handleNodeClick(node) {
      console.log(node)
      this.currentEditting = node;
      this.setCurrentKey();
      // this.$store.commit("saveSelectedTreeNode", node);
    },
    handleAddFile() {
      // const selectedTreeNode = this.$store.state.selectedTreeNode;
      const node = {
        type: "file",
        label: "",
        key: "",
        editting: true,
      };
      if (!this.currentEditting) {
        this.currentEditting = node;
        this.pageTree.push(node);
      } else {
        console.log("xxx");
      }
      this.$nextTick(() => {
        this.$refs.input.focus();
      });
    },
    handleAddFolder() {
      // const selectedTreeNode = this.$store.state.selectedTreeNode;
      const node = {
        type: "folder",
        label: "",
        key: "",
        editting: true,
        children: [],
      };
      if (!this.currentEditting) {
        this.currentEditting = node;
        this.pageTree.unshift(node);
      } else {
        console.log("xxx");
      }
      this.$nextTick(() => {
        this.$refs.input.focus();
      });
    },
    handleClickSetting(node) {
      this.currentEditting = node;
      this.setCurrentKey();
    },
    handleDelete() {},
    handleEditting() {},
    handleRename() {
      this.currentEditting.editting = true;
      this.$nextTick(() => {
        this.$refs.input.focus();
      });
    },
    handleInputBlur() {
      if (!this.currentEditting.label.trim()) {
        this.pageTree.shift();
      }
      this.currentEditting.editting = false;
      this.currentEditting = null;
    },
    setCurrentKey() {
      this.$refs.pageStructureTree.setCurrentKey(
        this.currentEditting?.key || null
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.pageStructureEditor {
  font-size: 14px;
  .operationBar {
    display: flex;
    justify-content: space-between;
    background: #eee;
    cursor: pointer;
    font-weight: bold;
    padding: 4px;
    span:last-child {
      i {
        font-size: 16px;
        margin-left: 4px;
        &:hover {
          color: salmon;
        }
      }
    }
  }
  .el-tree-node {
    .nodeItem {
      display: flex;
      width: 100%;
      padding: 4px;
      justify-content: space-between;
      ::v-deep {
        .el-input--mini .el-input__inner {
          height: 18px;
          line-height: 18px;
        }
      }
      .leftPart {
        display: flex;
        align-items: center;
        i {
          color: #c0c4cc;
          font-size: 12px;
          margin-right: 3px;
        }
      }
      .rightPart {
        display: none;
        i {
          margin-left: 8px;
          &:hover {
            color: salmon;
          }
        }
      }
      &:hover {
        .rightPart {
          display: block;
        }
      }
    }
    &.is-current {
      & > .el-tree-node__content {
        .nodeItem {
          .rightPart {
            display: block;
          }
        }
      }
    }
  }
}

.el-dropdown-menu__item {
  font-size: 12px;
  height: 24px;
  line-height: 24px;
}
::v-deep {
  .el-tree-node__content > .el-tree-node__expand-icon {
    padding: 3px;
  }
  .el-tree-node__expand-icon.is-leaf {
    display: none;
  }
}
</style>
